<template>
  <div class="fireIndex">
    <div class="youshang">
      <div class="box" v-for="(itemA, indexA) of listData" :key="indexA">
        <p class="title">{{itemA.title}}</p>
        <p class="cont">
          <span v-for="(itemB, indexB) of itemA.child" :key="indexB" @click="changeModel(itemB.title)" :style="{color:currentModel === itemB.title ? '#18ceff' : '#fff'}">{{itemB.title}}</span>
        </p>
      </div>
    </div>
    <FireMap v-if="currentModel === '森林火情A'"></FireMap>
    <FireReport v-if="currentModel === '森林火情B'"></FireReport>
    <EmergencyEvent v-if="currentModel === '突发事件'"></EmergencyEvent>
  </div>
</template>

<script>
import FireReport from './FireReport/FireReport.vue'
import FireMap from './FireMap/FireMap.vue'
import EmergencyEvent from './EmergencyEvent/EmergencyEvent.vue'
export default {
  name:"fireIndex",
  data(){
    return{
      listData:[
        {
          title:"专题图",
          child:[
            { title:"防风防汛" },
            { title:"森林火情A" },
          ]
        },
        {
          title:"专题报告",
          child:[
            { title:"森林火情B" },
            { title:"突发事件" },
          ]
        },
        {
          title:"专题报表",
          child:[
            { title:"防汛防风" },
          ]
        },
        {
          title:"数据分析",
          child:[
            { title:"历史火情" },
            { title:"历史灾害" },
          ]
        },
      ],
      currentModel:null,
    }
  },
  components:{
    FireReport,
    FireMap,
    EmergencyEvent,
  },
  mounted(){
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(109.85, 19.32, 500000),
    });
  },
  methods:{
    changeModel(type){
      console.log(type)
      this.currentModel = this.currentModel === type ? null : type
    },
  },
}
</script>

<style lang="stylus" scoped>
.fireIndex{
  .youshang{
    position: fixed;
    right:20px;
    top:100px;
    color: #fff;
    text-align-last: left;
    width: 340px;
    z-index:3;
    background: rgba(0, 0, 0, .5);
    padding:10px;
    .box{
      line-height: 30px;
      .title{
        margin-left: -5px;
        color: rgba(24, 206, 239, 1);
      }
      .cont{
        span{
          margin-right: 20px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>